<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- layui样式 -->
    <link rel="stylesheet" href="../../component/layui/css/layui.css">
    <!-- <link rel="stylesheet" href="../../component/pear/css/pear.css"> -->
    <title>附件列表</title>
    <style>
        #code {
            width: calc(100% - 200px);
            float: left;
            margin-right: 8px;
        }

        .layui-col-space15 {
            margin: 0px;
        }

        .card-item-image {
            width: 100%;
            height: 100%;
        }

        .card-header {
            height: 40%;
            line-height: 12px;
            color: rgb(51, 51, 51);
            font-size: 12px;
        }

        .card-shadow {
            cursor: pointer;
            box-shadow: 0 1px 2px 0 rgb(0 0 0 / 30%);
        }

        .project-list-item {
            background-color: #fff;
            border-radius: 4px;
            cursor: pointer;
            transition: all .2s;
        }

        .project-list-item-body {
            padding: 20px;
            border: 1px solid #e8e8e8;
        }

        .project-list-item .project-list-item-body>h2 {
            font-size: 16px;
            color: #333;
            margin-bottom: 12px;
        }

        .project-list-item .project-list-item-text {
            height: 40px;
            font-size: 12px;
            overflow: hidden;
            margin-bottom: 12px;
        }

        .time {
            color: #999;
            font-size: 12px;
        }
    </style>
    <script src="../../js/myUtils.js"></script>
</head>

<body style="background-color: #ffffff">

    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>附件清单</legend>
    </fieldset>
    <div class="layui-collapse">
        <div class="layui-colla-item">
            <h2 class="layui-colla-title">附件</h2>
            <div class="layui-colla-content layui-show">
                <div class="layui-collapse">
                    <div class="layui-colla-item">
                        <h2 class="layui-colla-title">举报材料</h2>
                        <div class="layui-colla-content">
                            <div class="layui-row layui-col-space15" id="stageOneDIV">

                            </div>
                        </div>
                    </div>

                    <div class="layui-colla-item">
                        <h2 class="layui-colla-title">反馈报告</h2>
                        <div class="layui-colla-content">
                            <div class="layui-row layui-col-space15" id="stageTwoDIV">

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="addAttach" class="layui-row" style="text-align: center; margin: 20px 0 10px 0;">
        <button type="button" class="layui-btn layui-btn-radius layui-btn-normal"
            data-method="confirmTrans">新增附件</button>
    </div>
    <!-- layui JS -->
    <script src="../../component/layui/layui.js"></script>
    <script src="../../component/pear/pear.js"></script>
    <script id="stageView" type="text/html">
        {{# layui.each(d.data, function(index, item){ }}
        <div class="layui-col-xs2 layui-col-md2 layui-col-lg3">
            
                <div class="project-list-item card-shadow">
                    <a href="{{item.uri}}" target="_blank">
                        <img src="../../images/file.jpg" class="card-item-image">
                    </a>
                    <div class="project-list-item-body">
                        <!-- <h2>Alipay</h2> -->
                        <div title="{{item.fileName}}" class="project-list-item-text layui-text" style="cursor: default;">
                            {{item.fileName}}
                        </div>
                        <div class="project-list-item-desc" style="margin-bottom: 25px; line-height: 24px;">
                            <span class="time layui-col-md6" style="cursor: default;">{{item.createTime}}</span>
                            <button type="button" class="layui-btn layui-btn-danger layui-btn-xs layui-col-md4 layui-col-md-offset2" data-id="{{item.id}}">
                                <i class="layui-icon layui-icon-unlink" title="删除附件"></i> 
                            </button>
                        </div>
                    </div>
                </div>
        </div>
        {{# }); }}
    </script>

    <script>
        var locationParams = myUtils.GetRequest()
        locationParams.code = parseInt(locationParams.code)
        var userInfoData = layui.data('userInfo').item
        // console.log("附件页面接收参数：", locationParams)
        layui.use(['form', 'jquery', 'element', 'layer', 'laytpl', 'upload', 'Api', 'request'], function () {
            var $ = layui.jquery,
                form = layui.form,
                layer = layui.layer,
                laytpl = layui.laytpl,
                upload = layui.upload,
                Api = layui.Api,
                request = layui.request,
                element = layui.element;


            getAttachList(locationParams.id)

            var fileList = new Object()

            function uoloadFile(id, stage) {
                layui.data('fileList', { key: 'fileName', value: fileList });
                var url = '../../view/nav/uploadFile.html?id=' + id + '&stage=' + stage
                layer.open({
                    type: 2,
                    closeBtn: 1,
                    title: '🚀 上传附件',
                    area: ['80%', '70%'],
                    content: encodeURI(url),
                    scrollbar: false,
                    maxmin: true,
                    shadeClose: true,
                    success: function () {

                    },
                    end: function () {
                        layui.data('fileList', { key: 'fileName', remove: true });
                    }
                });
            }

            function getAttachList(id) {
                var url = Api.attachment + '/' + id
                var success = function (res) {
                    var data = filterURI(res.data) // 过滤附件的URL前缀
                    // console.log("data: ", data)
                    getFileName(data.entering, data.feedback)
                    initStageOne(data.entering)
                    initStageTwo(data.feedback)
                    // 监听附件删除
                    $('.project-list-item-desc .layui-btn').on('click', function () {
                        var othis = $(this), id = othis.data('id');
                        active['deleteAttach'].call(this, id);
                    });
                }
                request.get(url, {}, success)
            }

            function initStageOne(data) {
                // console.log("initStageOne: ", data)
                var attachTpl = stageView.innerHTML,
                    stageOneDiv = document.getElementById('stageOneDIV');
                laytpl(attachTpl).render({
                    baseUrl: Api.baseUrl,
                    data: data
                }, function (html) { //渲染视图
                    stageOneDiv.innerHTML = html;
                });
            }

            function initStageTwo(data) {
                // console.log("initStageTwo: ", data)
                var attachTpl = stageView.innerHTML,
                    stageTwoDiv = document.getElementById('stageTwoDIV');
                laytpl(attachTpl).render({
                    baseUrl: Api.baseUrl,
                    data: data
                }, function (html) { //渲染视图
                    stageTwoDiv.innerHTML = html;
                });
            }

            function getFileName(stageOne, stageTwo) {
                // console.log("s2:",stageTwo)
                var stageOneList = []
                var stageTwoList = []
                for (let i in stageOne) {
                    stageOneList.push(stageOne[i].fileName)
                }
                for (let i in stageTwo) {
                    stageTwoList.push(stageTwo[i].fileName)
                }
                fileList = {
                    stageOne: stageOneList,
                    stageTwo: stageTwoList
                }
            }

            //触发事件
            var active = {
                confirmTrans: function () {
                    let flag = false
                    if (userInfoData.departmentCode != -2) { // 子部门
                        if (locationParams.code != 3) { // 查结状态不可改
                            flag = true
                        } else {
                            layer.alert('未查结前可上传！', { icon: 0 })
                        }
                    } else {
                        flag = true
                    }
                    if (flag) {
                        layer.confirm('请选择上传类型', {
                            btn: ['举报材料', '反馈报告']
                        }, function (index, layero) {
                            uoloadFile(locationParams.id, 0)
                            layer.close(index)
                        }, function (index) {
                            uoloadFile(locationParams.id, 1)
                            // 用户点击取消
                        });
                    }
                },
                deleteAttach: function (id) {
                    if (userInfoData.role != 0) {
                        layer.alert('仅管理员可删除！', { icon: 4 });
                    } else {
                        layer.confirm('确定删除该文件？', {
                            btn: ['确定', '取消']
                        }, function (index, layero) {
                            let url = Api.attachment + '/' + id
                            var success = function (res) {
                                if (res.errno == 0) {
                                    layer.msg('删除成功', { icon: 1 })
                                    setTimeout(() => {
                                        location.reload();
                                    }, 2000);
                                } else {
                                    layer.alert(res.errmsg, { icon: 2 });
                                }
                            }
                            request.delete(url, {}, success)
                        }, function (index) {
                            // 用户点击取消
                        });
                    }
                }
            };

            $('#addAttach .layui-btn').on('click', function () {
                var othis = $(this), method = othis.data('method');
                active[method] ? active[method].call(this, othis) : '';
            });

            function filterURI(dataObj) {
                for (let key in dataObj) {
                    let attachItem = dataObj[key];
                    for (let i = 0; i < attachItem.length; i++) {
                        let item = attachItem[i]
                        let uri = item.uri
                        if (uri.indexOf("http") == -1) {    // uri不存在HTTP
                            uri = Api.baseUrl + uri
                            item.uri = uri
                        }
                        attachItem[i] = item
                    }
                    dataObj[key] = attachItem
                }
                return dataObj
            }
        });
    </script>

</body>

</html>